<template>
  <div class="page" id="mountNode"></div>
</template>

<script>
export default {
  name: "ModuleTwo",
  data() {
    return {
      graphData: {
        // 节点信息
        nodes: [
          {
            // 点的数据
            id: "node0",
            // x: 100, // 节点x轴位置
            // y: 400, // 节点y轴位置
            size: 60, // 图形尺寸,注意：该数据类型会根据type变化,一定要看官方文档，这里表示的是圆的直径
            type: "circle", // 节点的形状
            label: "circle圆形", // 节点的文本名称
          },
          {
            id: "node1",
            // x: 100,
            // y: 100,
            size: 60,
            type: "circle",
            label: "circle圆形",
          },
          {
            id: "node2",
            // x: 220,
            // y: 100,
            size: [90, 50], // 数组的形式，节点的长宽值
            type: "rect",
            label: "rect矩形",
          },
          {
            id: "node3",
            // x: 350,
            // y: 100,
            size: [80, 40],
            type: "ellipse",
            label: "ellipse椭圆",
            labelCfg: {
              // 文本配置项
              position: "bottom", // 文本相对于节点的位置
              offset: 5, // 文本的偏移
              style: {}, // 设置文本标签的样式
            },
            style: {
              // 设置节点的样式 (注意区分上面的style对象)
              fill: "#fa8c16", // 节点填充色
              stroke: "#000", // 节点的描边颜色
              lineWidth: 2, // 描边宽度
            },
          },
          {
            id: "node4",
            // x: 460,
            // y: 100,
            size: [100, 80],
            type: "diamond",
            label: "diamond菱形",
          },
          {
            id: "node5",
            // x: 600,
            // y: 100,
            type: "triangle",
            label: "triangle三角形",
            labelCfg: {
              position: "right",
              offset: 5,
            },
          },
          {
            id: "node6",
            // x: 220,
            // y: 210,
            size: 65,
            type: "star",
            label: "star五角星",
          },
          {
            id: "node7",
            // x: 350,
            // y: 220,
            size: 60,
            type: "image",
            img: "https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg", // 图片路径
            label: "image自定义图片",
          },
          {
            id: "node8",
            // x: 550,
            // y: 220,
            description: "描述文本xxxxxxxxxxx", // 描述
            type: "modelRect",
            label: "modelRect文本描述",
          },
          {
            id: "card-node",
            // x: 650,
            // y: 400,
            size: [280, 173],
            reason:'',
            data: {
              grade: "1",
              cardNumber: "9222929229101",
              institution: "山莨菪碱萨达啦辅导老师大萨达发撒大萨达发",
            },
            type: "card-node",
          },
        ],
        // 边信息
        edges: [
          {
            source: "node6",
            target: "card-node",
          },
          {
            source: "node0", // 起始点id
            target: "node6", // 结束点id
            type: "line", // 边的类型，默认为 'line'
            label: "文本文字", // 文本文字，没有则不会显示
            labelCfg: {
              // 文本配置
              refX: "0", // 标签在 x 方向的偏移量
              refY: "10", // 标签在 y 方向的偏移量
              position: "top", // 文本相对于边的位置
              autoRotate: true, // 标签文字是否跟随边旋转
              style: {
                // 文本样式
                fill: "skyblue", // 文本颜色
                stroke: "red", // 文本描边颜色
                lineWidth: 1, // 文本描边粗细
                opacity: 0.9, // 文本透明度
                // ……
              },
            }, // 文本文字的配置样式
            style: {
              // 修改边的属性
              endArrow: true, // 结束端绘制箭头
              lineWidth: 4, // 线宽
              stroke: "red", // 边颜色
            },
          },
          {
            source: "node1",
            target: "node2",
          },
          {
            source: "node2",
            target: "node3",
          },
          {
            source: "node1",
            target: "node3",
          },
          {
            source: "node3",
            target: "node4",
          },
          {
            source: "node4",
            target: "node5",
          },
          {
            source: "node1",
            target: "node6",
          },
          {
            source: "node1",
            target: "node7",
          },
          {
            source: "node6",
            target: "node7",
          },
          {
            source: "node7",
            target: "node8",
          },
          {
            source: "node8",
            target: "node5",
          },
        ],
      },
    }
  },
  mounted() {
    this.drawGraph()
  },
  methods: {
    drawGraph() {
      // 定义画布的宽高
      const width = document.getElementById("mountNode").clientWidth
      const height = document.getElementById("mountNode").clientHeight
      // 实例化G6-  初始化
      const graph = new this.$G6.Graph({
        container: "mountNode", // 图的 DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象
        width, // 指定画布宽度，单位为 'px'，默认为画布容器宽度
        height, // 指定画布高度，单位为 'px'，默认为画布容器高度
        modes: {
          default: ["drag-canvas", "zoom-canvas", "drag-node"], // 允许拖拽画布、放缩画布、拖拽节点
          // default: ['drag-canvas', 'drag-node'] // 允许拖拽画布、拖拽节点
        },
        fitView: true, // 是否开启画布自适应。开启后图自动适配画布大小。
        fitViewPadding: [10, 10, 10, 10], //画布上四周的留白宽度
        defaultEdge: {
          // 默认状态下边的配置,可看上一节
          type: "line",
          style: {
            endArrow: true,
            lineWidth: 2,
            stroke: "#666",
          },
        },
        layout: {
          type: "circular",
        },
      })
      // 加载数据
      graph.data(this.graphData)
      // 渲染
      graph.render()
      // 更新changeData(data)
      // 销毁clear()
    },
  },
}
</script>
<style lang="scss" scoped>
.page {
  padding: 0;
}
</style>
